<template>
    <div class="login r-flex">
        <div class="r-flex__item">
            <div class="login-bg"></div>
        </div>
        <div class="white-box"></div>
        <div class="login-container">
            <div class="login-container--bg">
                <div class="login-title">
                    <img src="../../assets/images/logo.svg" class="logo" alt="yqrc.com"/>
                    <div class="dot">●</div>
                    <div class="name">招聘系统</div>
                </div>
                <el-form ref="loginForm"
                         label-position="top"
                         :model="model"
                         :rules="rules"
                         :status-icon="true"
                         @submit.native.prevent>
                    <el-form-item prop="username">
                        <el-input v-model="model.username" placeholder="管理员">
                            <icon slot="prefix" name="user" class="el-input__icon"></icon>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="model.password" placeholder="密码" show-password>
                            <icon slot="prefix" name="lock" class="el-input__icon"></icon>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha">
                        <div class="r-flex">
                            <div class="r-flex__item">
                                <el-input v-model="model.captcha" :maxlength="6" placeholder="验证码">
                                    <icon slot="prefix" name="captcha" class="el-input__icon"></icon>
                                </el-input>
                            </div>
                            <div class="captcha">
                                <el-tooltip class="item" effect="dark" content="刷新" placement="right">
                                    <el-image class="captcha-img"
                                              :src="captcha.img"
                                              @click="handleCaptcha">
                                        <div slot="error" class="captcha-img--slot">
                                            {{ captcha.label }}
                                        </div>
                                    </el-image>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   icon="rc-icon rc-icon-login"
                                   native-type="submit"
                                   :loading="loginLoading"
                                   @click="submitForm('loginForm')">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="go-back">
                <router-link :to="{path: '/crm/login'}">
                    <el-link type="primary" :underline="false">
                        <icon name="back-line" class="go-back--icon"></icon>
                        <span>登</span>
                        <span>录</span>
                        <span>C</span>
                        <span>R</span>
                        <span>M</span>
                        <span>系</span>
                        <span>统</span>
                    </el-link>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace, Action } from 'vuex-class'

import CaptchaMixins from '@/mixins/captcha'
import AuthMixins from '@/mixins/cms/auth'

import { validateChineseUsername } from '@/utils/rules'
import { successMessage, errorMessage } from '@/utils'
import { RawLocation } from 'vue-router'

const module = namespace('cms')

@Component
export default class Login extends mixins(CaptchaMixins, AuthMixins) {
  // Vuex
  @module.Action login!: (payload: any) => Promise<any>

  // form模型
  private model: any = {
    username: '苑小勇',
    password: '126345',
    captcha: '',
    captcha_key: ''
  }

  // 验证规则
  private rules: any = {
    username: [
      {required: true, message: '请填写用户名', trigger: 'blur'},
      {validator: validateChineseUsername, trigger: 'blur'},
      {min: 2, message: '请填写正确姓名', trigger: 'blur'}
    ],
    password: [
      {required: true, message: '请填写密码', trigger: 'blur'},
      {min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur'}
    ],
    captcha: [
      {required: true, message: '请填写验证码', trigger: 'blur'},
      {min: 4, max: 6, message: '验证码长度在 4 或 6 个字符串', trigger: 'blur'}
    ]
  }

  // 加载状态
  private loginLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.handleCaptcha()
  }

  /*----- 方法 -----*/
  handleCaptcha(): void {
    this.refreshCaptcha().then((res: any) => {
      if (res.status === 200) {
        this.model.captcha_key = res.data.key
      }
    })
  }

  /**
   * 提交表单
   *
   * @param name
   * @return {void}
   * @private
   */
  private submitForm(name: string): void {
    (this.$refs[name] as any).validate((valid: boolean) => {
      if (valid) {
        this.loginLoading = true
        this.login({param: this.model}).then((res) => {
          this.loginLoading = false

          const redirect: any = this.$route.query.redirect ?? {path: '/cms'}
          // console.log(redirect)
          if (redirect && res.status === 200) {
            successMessage(res.message)
            this.$router.push(redirect)
          } else {
            errorMessage(res.message)
          }
        }).catch((err) => {
          this.loginLoading = false
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/element/element-variables.scss";

.login {
    flex: 1;
    position: relative;
    background-color: #f9fafc;

    &-bg {
        display: flex;
        flex: 1;
        height: 100vh;
        background: url("~@/assets/images/cms-login-bg.jpg") no-repeat 0 100%;
        background-size: cover;
    }

    //.white-box {
    //    width: 50%;
    //}
    &-title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;

        .logo {
            width: 180px;
            height: auto;
        }

        .dot {
            margin: 15px 20px 0 20px;
            font-size: 15px;
        }

        .name {
            margin-top: 10px;
            font-size: 35px;
            font-weight: 500;
        }
    }

    &-container {
        position: absolute;
        top: 50%;
        left: 50%;
        //transform: translateY(-50%);
        transform: translate(-50%, -50%);
        max-width: 500px;
        width: 500px;

        &--bg {
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 50px;
            background-color: rgba(#fff, .9);
            box-shadow: 0 0 20px rgba(#000, .2);
            border-radius: 8px;
        }

        .go-back {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            right: -70px;
            z-index: 1;
            transform: translateY(-50%);
            padding: 0 10px;
            width: 70px;
            height: 300px;
            background-color: rgba(#000, .5);
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;

            &--icon {
                margin-bottom: 10px;
                font-size: 24px;
            }

            span {
                display: inline-block;
            }

            .el-link {
                width: 30px;
                color: #fff;
                font-size: 26px;
                line-height: 1.1;
                text-align: center;

                &:hover {
                    color: rgba(#fff, .8);
                }
            }
        }
    }
}

.el-form {
    margin-top: 50px;
    padding: 0 30px;

    .el-form-item {
        margin-bottom: 30px;

        ::v-deep &__content {
            line-height: 56px;
        }
    }

    .el-input {
        font-size: 18px;
        font-weight: 500;

        ::v-deep .el-input__inner {
            padding-left: 40px;
            padding-right: 40px;
            height: 56px !important;
            line-height: 56px !important;
            border-width: 2px;
            border-radius: 6px;
            box-shadow: 0 0 15px rgba(#000, .1);
        }

        ::v-deep &__prefix {
            width: 40px;

            .r-icon {
                line-height: 56px;
            }
        }

        ::v-deep &__suffix {
            margin-right: 10px;
            width: auto;

            .el-input__icon {
                font-size: inherit;
            }
        }
    }

    .captcha {
        position: relative;
        overflow: hidden;
        margin-left: 10px;
        width: 154px;
        height: 50px;
        background-color: #eee;
        border: 2px solid #fff;
        border-radius: 6px;
        box-shadow: 0 0 15px rgba(#000, .1);

        &-img {
            cursor: pointer;
            width: 100%;
            height: 100%;
            text-align: center;

            ::v-deep &--slot {
                line-height: 46px;
            }
        }
    }

    .el-button {
        width: 100%;
        font-size: 18px;
        border-radius: 6px;
    }
}
</style>
